<template>
  <div id="app">
    <div class="header">
      <div class="header-content">内部管理平台</div>
      <div class="user-content">
        <User></User>
      </div>
    </div>
    <div>
      <div class="search">
        <div class="search-button">
          <Input
            type="text"
            v-model="systemName"
            enter-button
            search
            placeholder="系统名"
            @on-search="query"
          />
        </div>
      </div>
      <div class="content">
        <template v-for="system in systemList">
          <systemItem :systemInfo="system" :key="system.name"></systemItem>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import User from '_c/user'
import systemItem from '_c/system-item'
import { setToken, getTokenFromURI } from '@/libs/util'
import { getUserInfoApi, querySystemListApi } from '@/api/application'
export default {
  name: 'App',
  data() {
    return {
      systemName: '',
      userInfo: {},
      systemList: [],
    }
  },
  components: {
    User,
    systemItem,
  },
  methods: {
    query(event) {
      console.log('点击....')
      let param = {}
      param.name = this.systemName
      this.querySystemList(param)
    },
    querySystemList(param) {
      querySystemListApi(param).then((systems) => {
        this.systemList = systems
      })
    },
  },
  created() {
    let token = getTokenFromURI()
    if (token !== '') {
      setToken(token)
    }
    getUserInfoApi()
      .then((data) => {
        this.userInfo = data
        this.querySystemList({})
      })
      .catch((error) => {
        console.log(error)
      })
  },
}
</script>

<style lang="less">
.size {
  width: 100%;
  height: 100%;
}
html,
body {
  .size;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
#app {
  .size;
  .header {
    color: #101010;
    background-color: #2d8cf0;
    height: 100px;
    width: 100%;
    margin: 0 auto;

    font-size: 60px;

    margin: 0 auto;
    .user-content {
      position: absolute;
      right: 20px;
      top: 20px;
    }
    &-content {
      line-height: 100px;
      margin: 0 auto;
      width: 400px;
    }
  }
  .search {
    padding: 10px 0;
    justify-content: space-between;
    border-top: 1px solid #bbbbbb;
    border-bottom: 1px solid #bbbbbb;
    &-button {
      position: relative;
      left: 20px;
      width: 300px;
    }
  }
  .content {
    display: flex;
  }
}
</style>
